<template>
	<div class="bg">
		<goback title="修改密码"></goback>

		<div class="save">
			<button class="greenButton" @click="save">保存</button>
		</div>
		<div class="text">请输入当前的密码，以及确认新密码</div>
		
		
		<div class="card">
			<div class="card_title">当前密码</div>
			<div class="card_context">
				<div>当前密码</div>
				<input v-model="now_password" type="password" placeholder="请输入您当前的密码"/>
			</div>
		</div>

		
		<div class="card">
			<div class="card_title">新的密码</div>
			<div class="card_context">
				<div>新的密码</div>
				<input v-model="new_password" type="password" placeholder="请输入您要的新密码"/>
			</div>
			<div class="card_context">
				<div>确认密码</div>
				<input v-model="new_password_confirm" type="password" placeholder="请二次输入您要的新密码以确认"/>
			</div>
		</div>
		


	</div>

</template>

<script>
	export default {
		data() {
			return {
				inputText: '',
				isButtonGreen: false,
				inputTimeout: null,
				selectedOption: 'option1', 
				now_password: '',
				new_password: '',
				new_password_confirm:''
			}
		},
		methods: {
			save(){
				
				if(this.now_password.length==0 || this.new_password.length == 0 || this.new_password_confirm.length ==0){
					this.$toast.showMessage("输入的内容有误,请检查");
					return;
				}
				
				if( this.new_password  != this.new_password_confirm ){
					this.$toast.showMessage("确认密码跟新密码不一致,请检查");
					return;
				}
				
				
				this.axios.get(`${this.IP}/changepassword`, {
					params:{
						token: this.getStorage('token'),
						password: this.now_password,
						new_password: this.new_password,
					}
				}).then(res => {
					let that = this;
						this.$toast.showMessage(res.data);
						that.$router.go(-1);
						setTimeout(function(){
							location.reload();
							
						},1500)
				})
			}

		},
	}
</script>

<style scoped>
	.text {
		margin-left: 4vw;
		margin-top: -4vw;
		margin-bottom: 4vw;
		color: black;
		z-index: 1;
	}

	.save {
		display: flex;
		justify-content: flex-end;
		margin-right: 2vw;
		margin-top: 2vw;
	}

	.greenButton {
		background-color: #06d072;
		color: white;
		padding: 1vw;
		border-radius: 1vw;
	}


	.card_context input{
		border: 1px solid #333;
		border-radius: 10px;
		width: 60vw;
		padding: 1vw;
	}



</style>
